<template>
  <div class="view-container" id="role">
    <list-header
      :title="'用户权限'"
      :delText="'删除'"
      :delLoading="delLoading"
      :isNeedSearch="false"
      @del="delOne"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
    </list-header>

    <section class="table-container">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="roleName" label="名称"></el-table-column>
        <el-table-column prop="sortIndex" label="序号" align="center" width="100"/>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>


  </div>
</template>

<script>
  import roleAPI from '@/api/system/role'
  import listMixin from '@/mixin/listMixin'
  import ListHeader from '@/common/ListHeader'
  export default {
    name: 'RoleList',
    components: {ListHeader},
    mixins: [listMixin],
    data() {
      return {
        mixinParams: {
          addUrl:'',
          editUrl:'',
          propertyName: 'roleId',
          API: roleAPI,
        },
      }
    },
    created() {

    },
    methods: {
      fetchData(){
        roleAPI.list(this.page).then(res=>{
          console.log('roleAPI.list',res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      openEditDialog(){
        this.$message.info('功能未实现')
      }
    }
  }
</script>

<style lang="scss">
  #role {
    padding: 0;
  }
</style>
